<template>
	<view>
		<z-nav-bar v-if="!isWxBrowser" transparentFixedFontColor="#000"  backState="2000" title="消息列表"></z-nav-bar>
		<view class="cu-list menu-avatar main" v-if="chatList.length > 0">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in chatList"
				:key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				:data-target="'move-box-' + index" @click="goChat(item.chat_user.uid)">
				<view class="cu-avatar round lg"
					:style="[{backgroundImage:'url(' + item.chat_user.avatar + ')'}]">
				</view>
				<view class="content">
					<view class="text-grey">{{item.chat_user.nickname}}</view>
					<view class="text-gray text-sm text-cut" style="height: 60rpx;">
						<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> 消息未送达 -->
						
						<rich-text :nodes="item.last_info"></rich-text>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{ item.record_time }}</view>
					<view class="cu-tag round bg-grey sm" v-if="item.unread_num > 0">{{ item.unread_num }}</view>
				</view>
				<view class="move">
					<view class="bg-red" @click.stop="removeChat(item.id)">删除</view>
				</view>
			</view>
		</view>
		<view class="" style="margin: 200rpx auto;" v-else>
			<u-empty
			        mode="message"
			        icon="http://cdn.uviewui.com/uview/empty/message.png"
			>
			</u-empty>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<tab-bar :current="3"></tab-bar>
		<!-- #endif -->
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				skin: false,
				// userInfo: {},// 用户数据
				// myuid: '', // 用户id
				chatList: [], // 存储会话列表
			};
		},
		computed: {
			...mapState(['userInfo']),
			myuid(){
				return this.userInfo.uid
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.$emit('updateData', {})
			// 检测登录
			this.judgeLogin(()=>{
				this.getChatList()
				uni.hideTabBarRedDot({index:2})
			});
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 获取会话列表
			getChatList(){
				var that = this
				that.$http.get('api/ZhChat/list').then(res=> {
					that.chatList = res
				})
			},
			// 移除会话
			removeChat(id){
				var that = this
				that.$http.post('api/ZhChat/removeChat',{
					'chat_id': id
				}).then(res=> {
					that.chatList = []
					that.getChatList()
				})
			}, 
			// 前往聊天
			goChat(sid){
				uni.navigateTo({
					url: '/pages/chat/chat?s_id=' + sid
				})
			}
		}
	}
</script>

<style>
	.main {
		// #ifdef MP-WEIXIN
		padding-bottom: 300rpx;
		// #endif
	}
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
